import { Meta, ArgTypes } from '@storybook/addon-docs';
import { Canvas, Node, Edge, Port, MarkerArrow, Add, Remove, Label, Icon } from '../../src';

<Meta title="Docs/Getting Started/Components" />

# Components
The library uses a variety of components internally that you can
customize.

- Canvas - The root component
- Node - The node element component
- Edge - The connector between nodes
- Port - The exit points of a node
- Marker Arrow - The shape used to connect show direction on the edges
- Add - The shape used on edges to show dropping between edges
- Remove - The shape used on nodes and edges to remove each
- Label - The component used by nodes and edges to show text
- Icon - The component used by nodes to show an icon

Below are the props from each component.

## `Canvas`

<ArgTypes of={Canvas} />

## `Node`
<ArgTypes of={Node} />

## `Edge`
<ArgTypes of={Edge} />

## `Port`
<ArgTypes of={Port} />

## `MarkerArrow`
<ArgTypes of={MarkerArrow} />

## `Add`
<ArgTypes of={Add} />

## `Remove`
<ArgTypes of={Remove} />

## `Label`
<ArgTypes of={Label} />

## `Icon`
<ArgTypes of={Icon} />
